<template>
	<div class="search">
		<header class="layout"> 
			<search-bar class="flex_1" :autofocused="true"></search-bar>
		</header>
		<section v-if="goods_list.list">
			<van-tabs>
				<van-tab v-for="(i,index) in screen_title" :key="index">
					<div slot="title" class='ellipsis' @click="loadInitScreenData(i)">{{ i.name }}</div>
					<ul class="w92 auto mb15">
						<router-link tag="li" :to="'/detail?id=' + item.crow_id" class="layout-juscon mt15" v-for="(item,index) in goods_list.list" :key="index">
							<img :src="item.img" class="img-bg" alt="" style="width:7.5rem;height:6.5rem;">
							<div class="flex_1 ml15">
								<p class="fs14 c333 bold mb5">{{ item.goods_name }}</p>
								<span class="fs12 c666">{{ item.introduction }}</span>
								<van-progress class="mt10 mb10" color="#ff7b1a" pivot-color="#ff7b1a" :percentage="item.progress"/>
								<div class="layout">
									<p><span class="fs12 subject">￥</span><strong class="fs18 subject">{{ item.price }}</strong><span class="fs12 subject">起</span></p>
									<span class="fs12 c333">{{ item.buyer_num }}人支持</span>
								</div>
							</div>
						</router-link>
					</ul>
				</van-tab>
			</van-tabs>
		</section>
	</div>
</template>

<script>
import SearchBar from '@/components/Search-bar';
import { Toast,Tab, Tabs,Progress } from "vant";
	export default{
		components: {
			SearchBar,
			Tab,
			Tabs,
			Progress
		},
		data()
		{
			return{
				screen_title  		: [{name:'综合排序',sort:0},{name:'即将结束',sort:3},{name:'金额最多',sort:1},{name:'人数最多',sort:4}],
				goods_list 			: [],
				value 				: '',
				sort				: 0,
			}
		},
		watch:{
			'$route'()
			{

				this.loadData(this.value);
			},
		},
		created()
		{
			if(this.$route.query.searchName){
				let searchName = this.$route.query.searchName;
				this.loadData(searchName);
			}
		},
		methods:
		{
			loadData(search_name)
			{
				let params = {
					kw : search_name,
					sort : this.sort
				}
				this.$http.get('/goods/search',{ params : params }).then( res => {
					if(res.data.length == 0)
						Toast('找不到这个内容~');
					else
						this.goods_list = res.data;
				});
			},
			loadInitScreenData(item)
			{
				this.sort = item.sort;
				this.loadData(this.value);
			}	
		}
	}
</script>

<style lang="less">
	.search{

	}
</style>
